<template>
  <div>
    <div class="serch">
      <div>
        <el-select v-model="value" placeholder="请选择" class="serect">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-input placeholder="请输入内容" v-model="input" clearable>
        </el-input>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="serchClick"
          >搜索</el-button
        >
      </div>
    </div>
    <div>
      <div>
        <!-- 表格 -->
        <el-table
          :data="
            getList.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          style="width: 100%"
        >
          <el-table-column prop="username" label="昵称" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="phone" label="电话"> </el-table-column>
          <el-table-column prop="image" label="头像">
            <img
              src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3420148433,1910953806&fm=26&gp=0.jpg"
              alt=""
              style="width: 30px; height: 30px;border-radius: 10px;"
            />
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top: 15px">
          <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 2, 3, 5]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="getList.length"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      options: [
        {
          value: "username",
          label: "昵称",
        },
        {
          value: "phone",
          label: "电话",
        },
        {
          value: "name",
          label: "姓名",
        },
        {
          value: "",
          label: "全部",
        },
      ],
      value: "",
      input: "",
      currentPage: 1, // 当前页码
      total: 4, // 总条数
      pageSize: 5, // 每页的数据条数
      tableData: [],
    };
  },
  computed:{
    getList(){
      return this.$store.getters.list
    },
  },

  methods: {
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    serchClick() {
      console.log("click");
      if (this.input!="") {
        console.log(1234);
       this.$store.dispatch("user/serachUser",{type:this.value,value:this.input})
      } else {
        console.log("in");
      this.$store.dispatch("user/getUserActions")
      }
    },
  },
  mounted() {
    this.$store.dispatch("user/getUserActions")
  },
};
</script>

<style>
.serch {
  width: 500px;
  display: flex;
  margin: 20px auto;

}
</style>